<template>
    <view :class="ns.b()">
        <template v-if="isLoading">
            <slot name="loading">
                <i-loading />
            </slot>
        </template>
        <template v-else-if="isError">
            <slot name="error">
                <view>ERROR</view>
            </slot>
        </template>
        <template v-else-if="isEmpty">
            <slot name="error">
                <view class="empty">
                    <image class="image" src="https://assets.iclss.com/images/empty.png" />
                </view>
            </slot>
        </template>
        <template v-else>
            <slot />
        </template>
    </view>
</template>

<script setup lang="ts">
import { useNamespace } from "@/hooks";

const ns = useNamespace("module-status");

const props = defineProps({
    isAppend: {
        type: Boolean,
        default: false
    },
    isLoading: {
        type: Boolean,
        default: false
    },
    isError: {
        type: Boolean,
        default: false
    },
    isEmpty: {
        type: Boolean,
        default: false
    }
});

const status = computed(() => {
    return props.isLoading ? "loading" : props.isError ? "error" : "success";
});
</script>

<style scoped lang="scss">
@import "./index";
</style>
